import { Tabs, Col, Row, Spin } from 'antd';
import { connect } from 'umi';
import React, { Component } from 'react';
import styles from './index.less';
import global from '@/global.less';
import HeaderTop from '../HeaderTop'
import CommentTitle from '../CommentTitle'
import MyTable from '../MyTable'
import classnames from 'classnames'
import HotMap from '../HotMap'
import MigrationMap from '../MigrationMap'
import HeaderFilter from '../HeaderFilter'
import { PictorialBar, GroupInterval, CustomizedPie, Doughnut } from './components'
import GlobalDoughnut from '../GlobalDoughnut'
import { joinDimensionField, joinDimensionField_stock,selectModel } from '@/utils/utils'


@connect(({ commerBuild }) => ({

}))
export default class MonitorWrapper extends Component {

  constructor() {
    super()
  }

  componentDidMount() {

  }

  render() {
    const bottomColLayout = {
      span: 12
    }
    const { dataRow, params, chartType, modelData, nameSpace, dataType, destorySign, regionAble ,fetchType='crowd'} = this.props
    const { staticts, region, purpose, date, dateRange, seqRange, currentDate, currentDates, currentSeq, currentSeqs, defaultDate, tabKey, region_code,showPic } = modelData

    const dimensionMap = dataType == '1' ? joinDimensionField('new', params.staticts) : joinDimensionField_stock(params.staticts)
    const fieldArr = dimensionMap[staticts] || []

    // console.log(dataRow)
    //处理迁徙图数据
    // const originMap = dataRow.origin_map
    // let flyGeo = []
    // let flyVal = []
    // if (originMap.length) {
    //   originMap.map((item)=>{
    //     let obj = {}
    //   })
    // }

    return (
      <div className={classnames(global.visual, styles.monitorWrapper)}>
        <div className={global.visualBottom}>
          <div className={styles.bottomMainLeft}>
            <CommentTitle title={`买受人购房面积段分布`} />
            <div className={styles.tableBody}>
              <GroupInterval data={dataRow.areaDistribution} staticts={staticts} params={params} charts='area_class' dataType={dataType} />
            </div>
          </div>
          <div className={styles.bottomMainRight}>
            <CommentTitle title={`买受人购房总价段分布`} />
            <div className={styles.tableBody}>
              <GroupInterval data={dataRow.moneyDistribution} staticts={staticts} params={params} charts='money_class' dataType={dataType} />
            </div>
          </div>
        </div>


        <div className={classnames(global.visualRight, styles.layoutRight)}>
          <div className={styles.rightItem}>
            <CommentTitle title={'买受人户籍分析'} />
            <div className={styles.tableBody}>
              <div style={{ height: '100%' }}>
                <PictorialBar data={dataRow.peopleBorn} staticts={staticts} params={params} dataType={dataType} purpose={purpose} showPic={showPic}/>
              </div>
            </div>
          </div>
          <div className={styles.rightItem}>
            <CommentTitle title={'购买物业类型分布'} />
            <div className={styles.tableBody}>
              <div style={{ height: '100%' }}>
                {/* <CustomizedPie data={dataRow.peoplePurpose} staticts={staticts} params={params} /> */}
                <GlobalDoughnut staticts={staticts} name={staticts} dataRow={dataRow.peoplePurpose} fieldName={fieldArr[0]} column="purpose_name"/>
              </div>
            </div>
          </div>
          <div className={styles.rightItem}>
            <CommentTitle title={'买受人年龄分布'} />
            <div className={styles.tableBody}>
              {/* <Doughnut data={dataRow.peopleAge} staticts={staticts} params={params}/> */}
              <GlobalDoughnut staticts={staticts} staticts={staticts} name={staticts} dataRow={dataRow.peopleAge} fieldName={fieldArr[0]} column="age_class" />
            </div>
          </div>
        </div>

        {tabKey == destorySign &&
          <div style={{ height: '100%', background: '#000716', position: 'relative' }}>
            <div className={styles.mapWrapper}>
              <HeaderFilter regionAble={regionAble} params={params} fetchType={fetchType} needSwitch={false} crowdStyle='true' nameSpace={nameSpace} needings={{ purpose, staticts, date, dateRange, seqRange, currentDate, currentDates, currentSeq, currentSeqs, defaultDate, tabKey,region_code }} />
              <MigrationMap data={dataRow.originMap} staticts={staticts} dataType={dataType} />
            </div>
          </div>
        }    //迁徙图

      </div>
    )
  }
}
